<template>
    <div class="box max-w-md mx-auto">
        <h1 class="title is-2 has-text-centered mb-6">欢迎访问 MUWA</h1>
        
        <div class="field">
            <label class="label">用户名</label>
            <div class="control">
                <input type="text" class="input" v-model="username" placeholder="请输入用户名">
            </div>
        </div>
        
        <div class="field">
            <label class="label">密码</label>
            <div class="control">
                <input type="password" class="input" v-model="password" placeholder="请输入密码">
            </div>
        </div>
        
        <div class="field is-grouped mt-6">
            <div class="control is-expanded">
                <button class="button is-primary is-fullwidth" @click="login">登录</button>
            </div>
        </div>
        
        <div class="field mt-4">
            <p class="text-center">
                还没有账号？ <a href="#" @click.prevent="register">立即注册</a>
            </p>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
    name: 'Login',
    setup() {
        const username = ref('');
        const password = ref('');
        const router = useRouter();
        
        const login = () => {
            // 简单的登录验证
            if (username.value && password.value) {
                alert('登录成功！');
                router.push('/main');
            } else {
                alert('请输入用户名和密码');
            }
        };
        
        const register = () => {
            alert('注册功能开发中...');
        };
        
        return {
            username,
            password,
            login,
            register
        };
    }
});
</script>